<template>
  <div class="content">
    <div ref="t1" :style="{width:'95%',marginTop: '30px'}"></div>
    <div ref="t2" :style="{width:'90%',marginTop: '50px'}"></div>
    <div ref="t3" :style="{width:'80%',marginTop: '50px'}"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  mounted(){
    // 文章类型堆叠统计
    this.axios.post('ARTICLE_T1').then(result => {
      this.drawT1(result.data);
    })
    this.axios.post('ARTICLE_T2').then(result => {
      // 公司得分堆叠统计
      this.drawT2(result.data);
      // 笛卡尔坐标热力图
      this.drawT3(result.data);
    })
  },
  methods: {
    drawT1(result){
      let T1 = echarts.init(this.$refs.t1)
      T1.resize({height: '900px'})
      T1.setOption({
        title: {
          text: '文章类型堆叠统计',
          x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['DNA测序研究', 'II期限临床试验', 'RNA测序研究', '按例报道', '方法研究', '非肿瘤', '分子机制研究', '公共数据库分析'
            , '回顾性研究', '技术研发', '技术验证', '家系研究', '临床队列研究', '临床试验', '软件工具算法', '真实世界研究', '综述'],
            y: 'center',
            x: 'right',
            orient: 'vertical'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: ['泛生子', '吉因加', '求臻医学', '燃石', '世和', '思路迪', '先声诊断', '臻和科技', '至本']
        },
        series: [
            {
                name: 'DNA测序研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#E41B1D'
                    }
                },
                data: [
                  result[0].type[0].count,
                  result[1].type[0].count,
                  result[2].type[0].count,
                  result[3].type[0].count,
                  result[4].type[0].count,
                  result[5].type[0].count,
                  result[6].type[0].count,
                  result[7].type[0].count,
                  result[8].type[0].count
                ]
            },
            {
                name: 'II期限临床试验',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#377EB8'
                    }
                },
                data: [
                  result[0].type[1].count,
                  result[1].type[1].count,
                  result[2].type[1].count,
                  result[3].type[1].count,
                  result[4].type[1].count,
                  result[5].type[1].count,
                  result[6].type[1].count,
                  result[7].type[1].count,
                  result[8].type[1].count
                ]
            },
            {
                name: 'RNA测序研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#4FAE49'
                    }
                },
                data: [
                  result[0].type[2].count,
                  result[1].type[2].count,
                  result[2].type[2].count,
                  result[3].type[2].count,
                  result[4].type[2].count,
                  result[5].type[2].count,
                  result[6].type[2].count,
                  result[7].type[2].count,
                  result[8].type[2].count
                ]
            },
            {
                name: '按例报道',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#984FA3'
                    }
                },
                data: [
                  result[0].type[3].count,
                  result[1].type[3].count,
                  result[2].type[3].count,
                  result[3].type[3].count,
                  result[4].type[3].count,
                  result[5].type[3].count,
                  result[6].type[3].count,
                  result[7].type[3].count,
                  result[8].type[3].count
                ]
            },
            {
                name: '方法研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#FF7F04'
                    }
                },
                data: [
                  result[0].type[4].count,
                  result[1].type[4].count,
                  result[2].type[4].count,
                  result[3].type[4].count,
                  result[4].type[4].count,
                  result[5].type[4].count,
                  result[6].type[4].count,
                  result[7].type[4].count,
                  result[8].type[4].count
                ]
            },
            {
                name: '非肿瘤',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#FFFE34'
                    }
                },
                data: [
                  result[0].type[5].count,
                  result[1].type[5].count,
                  result[2].type[5].count,
                  result[3].type[5].count,
                  result[4].type[5].count,
                  result[5].type[5].count,
                  result[6].type[5].count,
                  result[7].type[5].count,
                  result[8].type[5].count
                ]
            },
            {
                name: '分子机制研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#A6562A'
                    }
                },
                data: [
                  result[0].type[6].count,
                  result[1].type[6].count,
                  result[2].type[6].count,
                  result[3].type[6].count,
                  result[4].type[6].count,
                  result[5].type[6].count,
                  result[6].type[6].count,
                  result[7].type[6].count,
                  result[8].type[6].count
                ]
            },
            {
                name: '公共数据库分析',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#F681BE'
                    }
                },
                data: [
                  result[0].type[7].count,
                  result[1].type[7].count,
                  result[2].type[7].count,
                  result[3].type[7].count,
                  result[4].type[7].count,
                  result[5].type[7].count,
                  result[6].type[7].count,
                  result[7].type[7].count,
                  result[8].type[7].count
                ]
            },
            {
                name: '回顾性研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#999999'
                    }
                },
                data: [
                  result[0].type[8].count,
                  result[1].type[8].count,
                  result[2].type[8].count,
                  result[3].type[8].count,
                  result[4].type[8].count,
                  result[5].type[8].count,
                  result[6].type[8].count,
                  result[7].type[8].count,
                  result[8].type[8].count
                ]
            },
            {
                name: '技术研发',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#A5CEE2'
                    }
                },
                data: [
                  result[0].type[9].count,
                  result[1].type[9].count,
                  result[2].type[9].count,
                  result[3].type[9].count,
                  result[4].type[9].count,
                  result[5].type[9].count,
                  result[6].type[9].count,
                  result[7].type[9].count,
                  result[8].type[9].count
                ]
            },
            {
                name: '技术验证',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#1E78B4'
                    }
                },
                data: [
                  result[0].type[10].count,
                  result[1].type[10].count,
                  result[2].type[10].count,
                  result[3].type[10].count,
                  result[4].type[10].count,
                  result[5].type[10].count,
                  result[6].type[10].count,
                  result[7].type[10].count,
                  result[8].type[10].count
                ]
            },
            {
                name: '家系研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#B2DF8A'
                    }
                },
                data: [
                  result[0].type[11].count,
                  result[1].type[11].count,
                  result[2].type[11].count,
                  result[3].type[11].count,
                  result[4].type[11].count,
                  result[5].type[11].count,
                  result[6].type[11].count,
                  result[7].type[11].count,
                  result[8].type[11].count
                ]
            },
            {
                name: '临床队列研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#31A02B'
                    }
                },
                data: [
                  result[0].type[12].count,
                  result[1].type[12].count,
                  result[2].type[12].count,
                  result[3].type[12].count,
                  result[4].type[12].count,
                  result[5].type[12].count,
                  result[6].type[12].count,
                  result[7].type[12].count,
                  result[8].type[12].count
                ]
            },
            {
                name: '临床试验',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#FD999A'
                    }
                },
                data: [
                  result[0].type[13].count,
                  result[1].type[13].count,
                  result[2].type[13].count,
                  result[3].type[13].count,
                  result[4].type[13].count,
                  result[5].type[13].count,
                  result[6].type[13].count,
                  result[7].type[13].count,
                  result[8].type[13].count
                ]
            },
            {
                name: '软件工具算法',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#E2191C'
                    }
                },
                data: [
                  result[0].type[14].count,
                  result[1].type[14].count,
                  result[2].type[14].count,
                  result[3].type[14].count,
                  result[4].type[14].count,
                  result[5].type[14].count,
                  result[6].type[14].count,
                  result[7].type[14].count,
                  result[8].type[14].count
                ]
            },
            {
                name: '真实世界研究',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#FDBD71'
                    }
                },
                data: [
                  result[0].type[15].count,
                  result[1].type[15].count,
                  result[2].type[15].count,
                  result[3].type[15].count,
                  result[4].type[15].count,
                  result[5].type[15].count,
                  result[6].type[15].count,
                  result[7].type[15].count,
                  result[8].type[15].count
                ]
            },
            {
                name: '综述',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#FF7F04'
                    }
                },
                data: [
                  result[0].type[16].count,
                  result[1].type[16].count,
                  result[2].type[16].count,
                  result[3].type[16].count,
                  result[4].type[16].count,
                  result[5].type[16].count,
                  result[6].type[16].count,
                  result[7].type[16].count,
                  result[8].type[16].count
                ]
            }
        ]
      })
    },
    drawT2(result){
      let T2 = echarts.init(this.$refs.t2)
      T2.resize({height: '900px'})
      T2.setOption({
        title: {
          text: '公司得分堆叠统计',
          x: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['泛生子', '吉因加', '求臻医学', '燃石', '世和', '思路迪', '先声诊断', '臻和科技', '至本'],
            y: 'left',
            x: 'left',
            padding: [30,0,0,50]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: ['>20分', '1-3分', '10-20分', '3-5分', '5-10分']
        },
        series: [
            {
                name: '泛生子',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#E41B1D'
                    }
                },
                data: [
                  result[0].type[0].count,
                  result[0].type[1].count,
                  result[0].type[2].count,
                  result[0].type[3].count,
                  result[0].type[4].count
                ]
            },
            {
                name: '吉因加',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#367FB8'
                    }
                },
                data: [
                  result[1].type[0].count,
                  result[1].type[1].count,
                  result[1].type[2].count,
                  result[1].type[3].count,
                  result[1].type[4].count
                ]
            },
            {
                name: '求臻医学',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#4CAF4A'
                    }
                },
                data: [
                  result[2].type[0].count,
                  result[2].type[1].count,
                  result[2].type[2].count,
                  result[2].type[3].count,
                  result[2].type[4].count
                ]
            },
            {
                name: '燃石',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#984FA3'
                    }
                },
                data: [
                  result[3].type[0].count,
                  result[3].type[1].count,
                  result[3].type[2].count,
                  result[3].type[3].count,
                  result[3].type[4].count
                ]
            },
            {
                name: '世和',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#FF7F00'
                    }
                },
                data: [
                  result[4].type[0].count,
                  result[4].type[1].count,
                  result[4].type[2].count,
                  result[4].type[3].count,
                  result[4].type[4].count
                ]
            },
            {
                name: '思路迪',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#FFFF33'
                    }
                },
                data: [
                  result[5].type[0].count,
                  result[5].type[1].count,
                  result[5].type[2].count,
                  result[5].type[3].count,
                  result[5].type[4].count
                ]
            },
            {
                name: '先声诊断',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#A65627'
                    }
                },
                data: [
                  result[6].type[0].count,
                  result[6].type[1].count,
                  result[6].type[2].count,
                  result[6].type[3].count,
                  result[6].type[4].count
                ]
            },
            {
                name: '臻和科技',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#F781BF'
                    }
                },
                data: [
                  result[7].type[0].count,
                  result[7].type[1].count,
                  result[7].type[2].count,
                  result[7].type[3].count,
                  result[7].type[4].count
                ]
            },
            {
                name: '至本',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: '#999999'
                    }
                },
                data: [
                  result[8].type[0].count,
                  result[8].type[1].count,
                  result[8].type[2].count,
                  result[8].type[3].count,
                  result[8].type[4].count
                ]
            }
        ]
      })
    },
    drawT3(result){
      var hours = ['>20分', '1-3分', '10-20分', '3-5分', '5-10分'];
      var days = ['泛生子', '吉因加', '求臻医学', '燃石', '世和', '思路迪', '先声诊断', '臻和科技', '至本'];
      var data = [
        [0,0,result[0].type[0].count],[0,1,result[0].type[1].count],[0,2,result[0].type[2].count],[0,3,result[0].type[3].count],[0,4,result[0].type[4].count],
        [1,0,result[1].type[0].count],[1,1,result[1].type[1].count],[1,2,result[1].type[2].count],[1,3,result[1].type[3].count],[1,4,result[1].type[4].count],
        [2,0,result[2].type[0].count],[2,1,result[2].type[1].count],[2,2,result[2].type[2].count],[2,3,result[2].type[3].count],[2,4,result[2].type[4].count],
        [3,0,result[3].type[0].count],[3,1,result[3].type[1].count],[3,2,result[3].type[2].count],[3,3,result[3].type[3].count],[3,4,result[3].type[4].count],
        [4,0,result[4].type[0].count],[4,1,result[4].type[1].count],[4,2,result[4].type[2].count],[4,3,result[4].type[3].count],[4,4,result[4].type[4].count],
        [5,0,result[5].type[0].count],[5,1,result[5].type[1].count],[5,2,result[5].type[2].count],[5,3,result[5].type[3].count],[5,4,result[5].type[4].count],
        [6,0,result[6].type[0].count],[6,1,result[6].type[1].count],[6,2,result[6].type[2].count],[6,3,result[6].type[3].count],[6,4,result[6].type[4].count],
        [7,0,result[7].type[0].count],[7,1,result[7].type[1].count],[7,2,result[7].type[2].count],[7,3,result[7].type[3].count],[7,4,result[7].type[4].count],
        [8,0,result[8].type[0].count],[8,1,result[8].type[1].count],[8,2,result[8].type[2].count],[8,3,result[8].type[3].count],[8,4,result[8].type[4].count]
      ];
      data = data.map(function (item) {
          return [item[1], item[0], item[2] || '-'];
      });
      let T3 = echarts.init(this.$refs.t3)
      T3.resize({height: '1300px'})
      T3.setOption({
        title: {
          text: '笛卡尔坐标热力图',
          x: 'center'
        },
        tooltip: {
            position: 'top'
        },
        grid: {
            height: '50%',
            top: '10%'
        },
        xAxis: {
            type: 'category',
            data: hours,
            splitArea: {
                show: true
            }
        },
        yAxis: {
            type: 'category',
            data: days,
            splitArea: {
                show: true
            }
        },
        visualMap: {
            min: 0,
            max: 10,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%',
            inRange: {
                color: ['#ffffff','#367FB8']
            }
        },
        series: [{
            name: '文章数',
            type: 'heatmap',
            data: data,
            label: {
                show: true
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content{
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(90vh);
  overflow-y: scroll;
}
</style>